<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox, ElLoading } from "element-plus";
import {
  channel,
  channelAdd,
  channelEdit,
  channelDel,
  checkStatus,
} from "@/http/api";

export default {
  components: { outMain },
  name: "",
  data() {
    const checkPhone = (rule, value, callback) => {
      let result = this.$ruleCheck.checkPhone(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    return {
      addAccount: false,
      addPayMask: false,
      addRules: {
        channel_partner_name: [
          {
            required: true,
            message: "请输入渠道商名称",
            trigger: "blur",
            min: 2,
            max: 20,
          },
        ],
        login_account: [
          {
            required: true,
            message: "请输入登录账号(2~20位)",
            trigger: "blur",
            min: 2,
            max: 20,
          },
        ],
        login_password: [
          {
            required: true,
            message: "请输入登录密码(6~20位)",
            trigger: "blur",
            min: 6,
            max: 20,
          },
        ],
        contact_person: [
          {
            required: true,
            message: "请输入联系人(2~20位)",
            trigger: "blur",
            min: 2,
            max: 20,
          },
        ],
        mobile_phone: [
          {
            validator: checkPhone,
            required: true,
            trigger: "blur",
          },
        ],
        city: [
          {
            required: true,
            message: "请选择所属城市",
            trigger: "change",
          },
        ],
      },
      addForm: {
        login_account: "",
        login_password: "",
        channel_partner_name: "",
        mobile_phone: "",
        city: "",
        contact_person: "",
        account_status: 1,
      },
      tableData: [],
      statusArr: [
        { name: "正常", value: "正常" },
        { name: "冻结", value: "冻结" },
      ],
      queryData: {
        mobile_phone: "",
        account_status: "",
        page: 1,
        per_page: 10,
      },
      total: 0,
      activeItem: "",
    };
  },
  props: {},
  setup() {},
  methods: {
    deleteFn(row) {
      ElMessageBox.confirm("确定删除选择的账号吗?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const loading = ElLoading.service({
          lock: true,
          text: "Loading",
          background: "rgba(255, 255, 255, 0.7)",
        });
        const { data } = await channelDel({
          admin_id: row.admin_id,
        });
        setTimeout(() => {
          loading.close();
        }, 100);
        if (data.code == 1) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          this.getData();
        }
      });
    },
    checkStatus(row, type) {
      let str = type == 1 ? "恢复" : "冻结";
      ElMessageBox.confirm(`确定${str}选择的账号吗?`, "操作提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const loading = ElLoading.service({
          lock: true,
          text: "Loading",
          background: "rgba(255, 255, 255, 0.7)",
        });
        checkStatus({
          admin_id: row.admin_id,
          account_status: type,
        }).then((res) => {
          setTimeout(() => {
            loading.close();
          }, 100);
          if (res.data.code == 1) {
            ElMessage({
              type: "success",
              message: "操作成功",
            });
            this.getData();
          }
        });
      });
    },
    async sureAddFn() {
      await this.$refs.maskForm.validate();
      let queryData = { ...this.addForm };
      queryData.city = queryData.city.join("-");
      const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      const { data } = this.activeItem
        ? await channelEdit(queryData)
        : await channelAdd(queryData);
      setTimeout(() => {
        loading.close();
      }, 100);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: this.activeItem ? "编辑成功" : "新增成功",
        });
        this.addAccount = false;
        if (!this.activeItem) {
          this.queryData.page = 1;
        }
        this.getData();
      }
    },
    surePayFn() {
      this.addPayMask = false;
    },
    payFn() {
      this.addPayMask = true;
    },
    addFn(item) {
      this.activeItem = item;
      if (item) {
        this.addForm = { ...item };
        this.addForm.city = item.city.split("-");
      } else {
        this.addForm = {
          login_account: "",
          login_password: "",
          channel_partner_name: "",
          mobile_phone: "",
          city: "",
          contact_person: "",
          account_status: 1,
        };
      }
      this.addAccount = true;
    },
    detailFn() {
      this.$router.push({ path: "/channelDetail" });
    },
    serchFn() {
      this.queryData.page = 1;
      this.getData();
    },
    getData() {
      const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      channel(this.queryData).then((res) => {
        setTimeout(() => {
          loading.close();
        }, 100);
        if (res.data.code == 1) {
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;
        }
      });
    },
  },
  mounted() {},
  async created() {
    this.citys = await this.$city.getCity();
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="tableCont">
      <div class="tableName flexCont">
        <div>渠道商账号列表（{{ total }}）</div>
      </div>
      <div class="tableSerch">
        <div class="serchLeft">
          <el-button type="primary" @click="addFn()">
            <span class="iconfont icon-tianjia"></span>
            <span>新增渠道商账号</span>
          </el-button>
        </div>
        <div class="serchRight">
          <el-form class="flexCenter" :inline="true">
            <el-form-item>
              <el-input
                clearable
                @clear="getData"
                @keyup.enter="getData"
                v-model="queryData.mobile_phone"
                placeholder="手机号"
              />
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="queryData.account_status"
                clearable
                @change="getData"
                placeholder="状态"
              >
                <el-option
                  v-for="item in statusArr"
                  :key="item.name"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-button class="hasBottom" type="primary" @click="addFn">
              <span class="iconfont icon-sousuo"></span>
              <span>搜索</span>
            </el-button>
          </el-form>
        </div>
      </div>
      <el-table class="tableMain" :data="tableData" stripe>
        <el-table-column
          prop="login_account"
          show-overflow-tooltip
          label="登录账号"
        />
        <el-table-column
          prop="login_password"
          show-overflow-tooltip
          label="登录密码"
        />
        <el-table-column
          prop="channel_partner_name"
          width="140"
          show-overflow-tooltip
          label="渠道商名称"
        />
        <el-table-column
          prop="city"
          width="140"
          show-overflow-tooltip
          label="所属城市"
        />
        <el-table-column label="累计授权">
          <template #default="{ row }">
            <div>99次</div>
          </template>
        </el-table-column>
        <el-table-column label="剩余授权">
          <template #default="{ row }">
            <div>100次</div>
          </template>
        </el-table-column>
        <el-table-column label="账号状态">
          <template #default="{ row }">
            <div>
              <el-tag type="success" v-if="row.account_status == 1"
                >正常</el-tag
              >
              <el-tag type="danger" v-if="row.account_status == 2">冻结</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          width="170"
          show-overflow-tooltip
          label="创建时间"
        />
        <el-table-column prop="Name" width="210" label="操作">
          <template #default="{ row }">
            <div class="tableCtrl">
              <div class="blueText ctrlText" @click="detailFn(row)">详情</div>
              <div class="blueText ctrlText" @click="addFn(row)">编辑</div>
              <div class="blueText ctrlText" @click="payFn(row)">充值</div>
              <div
                class="redText ctrlText"
                v-if="row.account_status == 1"
                @click="checkStatus(row, 2)"
              >
                冻结
              </div>
              <div
                class="blueText ctrlText"
                v-if="row.account_status == 2"
                @click="checkStatus(row, 1)"
              >
                恢复
              </div>
              <div class="redText ctrlText" @click="deleteFn(row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageCont">
        <el-pagination
          v-model:currentPage="queryData.page"
          v-model:page-size="queryData.per_page"
          background
          small
          layout="total, prev, pager, next, jumper"
          :total="total"
          @size-change="getData"
          @current-change="getData"
        />
      </div>
    </div>
    <el-dialog title="新增管理员" v-model="addAccount" width="600px">
      <div class="maskForm formItemRow1">
        <el-form
          :rules="addRules"
          label-width="130"
          :model="addForm"
          ref="maskForm"
        >
          <div class="flexCont">
            <el-form-item label="渠道商名称" prop="channel_partner_name">
              <el-input
                clearable
                placeholder="请输入渠道商名称"
                v-model="addForm.channel_partner_name"
              />
            </el-form-item>
            <el-form-item label="登录账号" prop="login_account">
              <el-input
                clearable
                placeholder="请输入登录账号"
                v-model="addForm.login_account"
              />
            </el-form-item>
            <el-form-item label="登录密码" prop="login_password">
              <el-input
                clearable
                placeholder="请输入登录密码"
                v-model="addForm.login_password"
              />
            </el-form-item>
            <el-form-item label="联系人" prop="contact_person">
              <el-input
                clearable
                placeholder="请输入联系人"
                v-model="addForm.contact_person"
              />
            </el-form-item>
            <el-form-item label="手机号" prop="mobile_phone">
              <el-input
                clearable
                placeholder="请输入手机号"
                v-model="addForm.mobile_phone"
              />
            </el-form-item>
            <el-form-item label="所属城市" prop="city">
              <el-cascader
                style="width: 100%"
                placeholder="请选择此账号所属城市"
                v-model="addForm.city"
                :options="citys"
              />
            </el-form-item>
            <el-form-item label="账号状态">
              <el-radio v-model="addForm.account_status" :label="1"
                >正常</el-radio
              >
              <el-radio v-model="addForm.account_status" :label="2"
                >冻结</el-radio
              >
            </el-form-item>
          </div>
        </el-form>
        <div class="maskFoot">
          <el-button @click="addAccount = false">取 消</el-button>
          <el-button type="primary" @click="sureAddFn">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="充值授权次数" v-model="addPayMask" width="600px">
      <div class="maskForm formItemRow1">
        <el-form
          :rules="addRules"
          label-width="130"
          :model="addForm"
          ref="maskForm"
        >
          <div class="flexCont">
            <el-form-item label="充值次数" prop="login_account">
              <el-input
                clearable
                placeholder="请输入充值次数"
                v-model="addForm.login_account"
              />
            </el-form-item>
            <el-form-item label="支付金额" prop="login_account">
              <el-input
                clearable
                placeholder="请输入支付金额"
                v-model="addForm.login_account"
              />
            </el-form-item>
            <el-form-item label="超级密码" prop="login_account">
              <el-input
                clearable
                placeholder="请输入超级密码"
                v-model="addForm.login_account"
              />
            </el-form-item>
          </div>
        </el-form>
        <div class="maskFoot">
          <el-button @click="addPayMask = false">取 消</el-button>
          <el-button type="primary" @click="surePayFn">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </outMain>
</template>
<style scoped lang="less"></style>
